<template>
  <div>
    <div class="title">
      <h5>{{content.title}}</h5>
      <span class="fl">{{content.add_time}}</span>
      <span class="fr">点击: {{content.click}}</span>
    </div>

    <hr>
    <div id="thumbs">
      <vue-preview :slides="list" @close="handleClose"></vue-preview>
    </div>
    <p v-html="content.content"></p>
    <comment :id="id"></comment> 
  </div>
</template>
<script>
import { getimageInfo, getthumimages } from "@/api";
import comment from '@/commt/comment.vue'
export default {
  data() {
    return {
      id: this.$route.params.id,
      content: "",
      list: []
    };
  },
  methods: {
    handleClose() {
      console.log("close event");
    },
    getthum() {
      getthumimages(this.id).then(res => {
        console.log(res);
        if (res.data.status == 0) {
          res.data.message.forEach(item => {
              item.msrc = item.src;
            item.w = 600;
            item.h = 400;
          });
        }
        this.list = res.data.message
        console.log(this.list);
      });
    }
  },
  created() {
    getimageInfo(this.id).then(res => {
      console.log(res);
      this.content = res.data.message[0];
    });
    this.getthum()
  },
  components:{
    comment
  }
};
</script>
<style lang="less" scoped>
/deep/#thumbs .my-gallery{
   
    // width: 100%;
    overflow: hidden;
    figure {
      padding: 5px;
      width: 100px;
      float: left;
      margin: 0;
      a {
        width: 100%;
        display: block;
      }
      img {
        width: 100%;
        height: 60px;
        display: block;
      }
    }
  }

.title {
  overflow: hidden;
  h5 {
    padding: 10px;
    color: blue;
    font-weight: 700;
  }
  .fl {
    float: left;
  }
  span {
    font-size: 16px;
    color: #666;
  }
  .fr {
    float: right;
  }
}
</style>
